﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="Web.About.NewAbout.about" %>
<%@ Register Src="~/AboutControl/sidebar.ascx" TagPrefix="uc1" TagName="sidebar" %>
<%@ Register Src="~/AboutControl/footer.ascx" TagPrefix="uc1" TagName="footer" %>
<%@ Register Src="~/AboutControl/state.ascx" TagPrefix="uc1" TagName="state" %>
<%@ Register Src="~/AboutControl/headers.ascx" TagPrefix="uc1" TagName="headers" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="keywords" content="恒信人才,恒信网聘,恒信猎头,恒信派遣,恒信培训,恒信家政"/>
    <meta name="description" content="恒信人才目前是浙江省内最具规模和影响力的专业人力资源公司,全力引进优秀人才,支持浙江新的腾飞!"/>
    <meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=yes" name="format-detection"/>
    <meta name="renderer" content="webkit"/>
    <meta content="email=no" name="format-detection"/>
    <link href="css/all.css" rel="stylesheet" />    
    <link href="css/media.css" rel="stylesheet" /><!--各个浏览器响应式属性-->
    <link href="css/animation.css" rel="stylesheet" /><!--图片渐变键入效果样式-->
    <link href="css/base.css" rel="stylesheet" /><!--默认样式重置-->
    <link rel="stylesheet" href="css/lrtk.css" /><!--banner样式-->
    <link href="css/scroll.css" rel="stylesheet" /><!--默认样式重置-->
    <link href="css/product.css" rel="stylesheet" /><!--产品服务样式-->

    <!-- 引入 swiper 核心样式 -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> 

    <script src="js/jquery.js"></script><!--Jquery1.10.1库-->
    <!-- 引入 swiper 核心脚本（放 jQuery 之后，index.js 之前） -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> 
    <script src="js/waypoints.min.js" type="text/javascript"></script><!--滚动监听--> 
    <script src="js/index.js" type="text/javascript"></script><!--滚动监听--> 
    <script src="js/scroll.js" type="text/javascript"></script><!--轮播图--> 
    
</head>  
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
     <uc1:headers runat="server" id="headers" />
<uc1:sidebar runat="server" ID="sidebar" />
  <!-- 顶部 banner 图 -->
  <div class="top-banner">
    <img src="/images/solution/center_bg.jpg" alt="">
    <div class="banner-title">
      <div class="banner-h1">招聘中心</div>
      <div class="banner-h2">助力企业各行各业的人才招聘需求</div>
      <div class="banner-btn"><a href="https://hxrc91job.mikecrm.com/Gg7ZWF">联系我们</a></div>
    </div>
  </div>

  <!-- 导航栏 -->
  <div class="nav">
    <div class="nav-container">
      <ul>
        <li class="title active" data-target="custormer-difficulty">
          <a href="#custormer-difficulty" style="text-decoration: none; color: inherit;">客户的难题</a>
        </li>
        <li  class="title " data-target="mine-product">
          <a href="#mine-product" style="text-decoration: none; color: inherit;">我们的产品</a>
        </li>
        <li  class="title " data-target="advantage">
          <a href="#advantage" style="text-decoration: none; color: inherit;">我们的优势</a>
        </li>
        <li class="title " data-target="enterprise-honor">
          <a href="#enterprise-honor" style="text-decoration: none; color: inherit;">我们的价值</a>
        </li>
      
      </ul>
    </div>
  </div>

  <!-- 内容容器 -->
  <div class="container">
    <!-- 客户的难题 -->
    <div id="custormer-difficulty" class="custormer-difficulty">
        <div>

      <h2 class="section-header-h1">客户的难题</h2>
      <div class="corporate-culture">
          <div class="culture-item">
              <h3>01</h3>
              <p>新业务新区域交付难
</p>
              <p>客户在战略转型、业务增长全国各区域开拓等背景压力下，内部招聘团队难以应付
</p>
          </div>
          <div class="culture-item">
              <h3>02</h3>
              <p>客户人手不足
</p>
              <p>招聘时间紧、职位多、涉及招聘流程环节复杂，企业无法通过现有人手完成招聘任务
</p>
          </div>
          <div class="culture-item">
              <h3>03</h3>
              <p>实施难度高
 </p>
              <p>招聘岗位要求复杂，招聘难度高，企业无法通过现有资源完成招聘任务
</p>
          </div>
          <div class="culture-item">
              <h3>04</h3>
              <p>渠道资源少
</p>
              <p>客户现有渠道资源较少，招聘任务实施过程中效率低下
</p>
          </div>
          </div>
        </div>

    </div>

    <!-- 我们的产品 -->
    <div id="mine-product" class="mine-product">
       <div>

      <h2 class="section-header-h1">我们的产品</h2>
     <div class="product-text">
      定制化招聘服务，业务面向浙江省重点城市，深耕互联网、电子商务、玩具制造、纺织服装制造、集成电路、光伏新能源汽车、医疗健康等制造行业。公司拥有超数十万份中高层人才数据库，能向客户快速精准推荐高质量人才。据客户的实际情况，量身定制服务方案，定向为客户深入挖掘最合适的人才。



     </div>
     <div class="product-center">
        <div class="product-content">
          <div class="left-line"></div>
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slider">
                <div class="swiper-l-line lline" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce1.png" alt="">
                  </div>
                  <div class="txt">专业咨询与服务<br>诊断</div>
                </div>
                <div class="swiper-r-line rline " ></div>
              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline no2line" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce2.png" alt="">
                  </div>
                  <div class="txt">定制相应的人力<br>资源服务流程</div>
                </div>
                <div class="swiper-r-line rline" style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline no3line" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce3.png" alt="">
                  </div>
                  <div class="txt">稳定的服务<br>质量</div>
                </div>
                <div class="swiper-r-line rline" style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline no4line" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce4.png" alt="">
                  </div>
                  <div class="txt">定期的服务评估<br>与持续渐进</div>
                  
                </div>
                <div class="swiper-r-line rline" style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline no5line" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce5.png" alt="">
                  </div>
                  <div class="txt">伴随企业发展，提供<br>可拓展的体系化<br>服务支持</div>
                </div>
                <div class="swiper-r-line rline " style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline no6line" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce6.png" alt="">
                  </div>
                  <div class="txt">管理并跟踪客户<br>需求变化</div>
                </div>
                <div class="swiper-r-line rline " style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline no7line" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce7.png" alt="">
                  </div>
                  <div class="txt">提供全面的<br>服务信息交付<br>支持平台</div>
                </div>
                <div class="swiper-r-line rline " style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
            </div>
          </div>
          <div class="right-line"></div>
        </div>
     </div>

    </div>
    </div>
    <div class="container">
    <!-- 我们的优势 -->
    <div id="advantage" class="advantage-section-center">
        <div>

      <h2 class="section-header-h1">我们的优势</h2>
      <div class="corporate-culture">
        <div class="center-first">
            <div class="culture-item">
            <div class="top-img">
              <img src="/images/solution/center_a_bg1.png" alt="">
            </div>
            <div class="asc-right">
               <h3>01</h3>
                <p>深耕浙中地区20余年</p>
            </div>
             
           
          </div>
          <div class="culture-item">
             <div class="top-img">
              <img src="/images/solution/center_a_bg2.jpg" alt="">
            </div>
              <div class="asc-right">
                 <h3>02</h3>
                 <p>214306+ 人才数据库</p>
              </div>
          </div>
        </div>
        <div class="center-scend">
 <div class="culture-item">
             <div class="top-img">
              <img src="/images/solution/center_a_bg3.jpg" alt="">
            </div>
            <div class="asc-right">
               <h3>03</h3>
                <p>服务1800+ 会员企业</p>
            </div>
          </div>
           <div class="culture-item">
             <div class="top-img">
              <img src="/images/solution/center_a_bg4.jpg" alt="">
            </div>
             <div class="asc-right">
               <h3>04</h3>
                <p>5358+ 中高端职业案例</p>
            </div>
          </div>
        </div>
        
         
          
          </div>
        </div>

    </div>


    <!-- 我们的价值 -->
    <div id="enterprise-honor" class="honor-section">
       <div>

      <h2 class="section-header-h1">我们的价值</h2>
      <div class="corporate-culture">
          <div class="culture-item">
              <h3>人事部门</h3>
              <p>获取多元化招聘渠道、提升招聘效率</p>
<div class=" value-icon value-icon1"></div>
          </div>
            <div class="culture-item">
                <h3>业务部门</h3>
                <p>聚焦核心业务、用人需求被及时满足</p>
                <div class="value-icon value-icon2"></div>
            </div>
            <div class="culture-item">
              <h3>风控部门</h3>
                <p>合法合规运营</p>
                <div class="value-icon value-icon3"></div>
            </div>
            <div class="culture-item">
                <h3>财务部门</h3>
                <p>成本透明可控</p>
                <div class="value-icon value-icon4"></div>
            </div>
          
          </div>
        </div>
      </div>

    </div>
    </div>
  </div>
        <uc1:footer runat="server" ID="footer" />
        <uc1:state runat="server" ID="state" />
  <script>
   $(document).ready(function() {
        // 修复导航激活状态功能
        const sections = $('.section');
        const navItems = $('.nav-container .title');
        
        // 平滑滚动函数
        function scrollToTarget(target) {
            $('html, body').animate({
                scrollTop: $(target).offset().top - 80 // 减去导航栏高度
            }, 800);
        }
        
        // 点击导航项处理
        navItems.click(function(e) {
            e.preventDefault();
            
            // 移除所有active类
            navItems.removeClass('active');
            // 给当前点击项添加active类
            $(this).addClass('active');
            
            const target = $(this).data('target');
            scrollToTarget('#' + target);
        });
        
        // 滚动监听
        $(window).scroll(function() {
            const scrollPosition = $(window).scrollTop() + 100;
            console.log('scrollPosition',scrollPosition);
            
            // 遍历所有section
            sections.each(function() {
                const sectionTop = $(this).offset().top;
                console.log('sectionTop',sectionTop);
                
                const sectionHeight = $(this).outerHeight();
                const sectionId = $(this).attr('id');
                
                // 检查当前滚动位置是否在section范围内
                if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                    // 移除所有active类
                    navItems.removeClass('active');
                    // 给对应导航项添加active类
                    $(`.nav-container .title[data-target="${sectionId}"]`).addClass('active');
                }
            });
        });
        
        // 初始化：检查初始滚动位置
        $(window).trigger('scroll');
    });
  </script>
</body>

</html>
